<template>
  <div class="consultpart">
    <van-sticky :offset-top="46" class="box-shadow">
      <div @click="serach()">
        <van-search
          class="search-module"
          v-model="search"
          placeholder="请输入搜索关键词"
          show-action
          shape="round"
          disabled
        >
          <div slot="action">搜索</div>
        </van-search>
      </div>
    </van-sticky>
    <van-grid :border="false">
      <van-grid-item
        v-for="(value,index) in menu"
        :key="index"
        :icon="value.img"
        :text="value.text"
        @click="hrefway(index)"
      />
    </van-grid>
    <div class="swiper-dom-box">
      <van-swipe class="hqBox-box" :autoplay="4000" vertical :show-indicators="false">
        <van-swipe-item v-for="(i,index) in dataBannerLeft" :key="index">
          <div :class="['hqBox-box-p' ,{'p-qs-up':i.flag=='up'},{'p-qs-down':i.flag=='down'}]">
            <p class="p-name">{{i.title}}</p>
            <p class="p-price">{{i.number}}</p>
            <p class="p-qs">
              <i></i>
              <span>{{i.gain}}&nbsp;&nbsp;{{i.per}}</span>
            </p>
          </div>
        </van-swipe-item>
      </van-swipe>
      <van-swipe class="hqBox-box" :autoplay="4000" vertical :show-indicators="false">
        <van-swipe-item v-for="(i,index) in dataBannerRight" :key="index">
          <div :class="['hqBox-box-p' ,{'p-qs-up':i.flag=='up'},{'p-qs-down':i.flag=='down'}]">
            <p class="p-name">{{i.title}}</p>
            <p class="p-price">{{i.number}}</p>
            <p class="p-qs">
              <i></i>
              <span>{{i.gain}}&nbsp;&nbsp;{{i.per}}</span>
            </p>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <partmorennews :titleConfig="{}" class="mt30"></partmorennews>
    <topIcon></topIcon>
  </div>
</template>
<script type="text/ecmascript-6">
import partmorennews from "../../components/newslist/loadMoreList";
import topIcon from "../../components/topIcon";
import { imgBox } from "../../assets/data/menuData";
export default {
  data() {
    return {
      search: "",
      menu: [
        {
          text: "价格",
          img: imgBox["tcl"][0]
        },
        {
          text: "数据",
          img: imgBox["tcl"][2]
        },
        {
          text: "报告",
          img: imgBox["tcl"][3]
        },
        {
          text: "供求",
          img: imgBox["tcl"][4]
        }
      ],
      dataBannerRight: [],
      dataBannerLeft: []
    };
  },
  components: {
    partmorennews,
    topIcon
  },
  methods: {
    getSwiper() {
      let channel = this.$route.query.channel;
      let banner = {};
      if (channel == "tcl") {
        banner = this.$store.state.indexData.datatcl;
      } else if (channel == "dc") {
        banner = this.$store.state.indexData.datadc;
      } else if (channel == "dlg") {
        banner = this.$store.state.indexData.datadlg;
      }
      this.dataBannerRight = this.setArr0(banner.right);
      this.dataBannerLeft = this.setArr0(banner.left);
    },
    setArr0(arr) {
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        if (element.flag == "normal") {
          element.gain = "--";
          element.per = "--";
        }
      }
      return arr;
    },
    serach() {
      let query = this.$route.query;
      this.$router.push({ path: "search", query: query });
    },
    hrefway(index) {
      let query = this.$route.query;
      let url;
      if (index === 0) {
        if (this.$route.query.channel == "tcl") {
          url = `priceparttcl`;
        } else if (this.$route.query.channel == "dc") {
          url = `pricepartdc`;
        } else if (this.$route.query.channel == "dlg") {
          url = `pricepartdlg`;
        }
      } else {
        url = this.setHrefurl(index);
      }
      this.$router.push({ path: url, query: query });
    },
    setHrefurl(i) {
      switch (i) {
        case 0:
          return "pricepart";
          break;
        case 1:
          return "priceSj";
          break;
        case 2:
          return "reportpart";
          break;
        case 3:
          return "replaypart";
          break;
        default:
          break;
      }
    }
  },
  created() {
    this.getSwiper();
  }
};
</script>
<style scoped lang="less">
.swiper-dom-box {
  padding: 0.3rem;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  .hqBox-box {
    width: 3.28rem;
    height: 1.68rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.08rem;
  }
  .hqBox-box-p {
    background: rgba(249, 249, 249, 1);
    height: 100%;
    text-align: center;
    color: rgba(39, 41, 55, 1);
  }
  .p-name {
    padding-top: 0.12rem;
    margin-bottom: 0.12rem;
    font-size: 0.2rem;
    color: rgba(39, 41, 55, 1);
    line-height: 0.28rem;
  }
  .p-price {
    margin-bottom: 0.12rem;
    font-size: 0.48rem;
    font-weight: bolder;
    color: inherit;
  }
  .p-qs {
    background: rgba(55, 161, 12, 0.1);
    border-radius: 0.08rem;
    position: relative;
    height: 0.4rem;
    width: 1.8rem;
    line-height: 0.4rem;
    font-size: 0.2rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      transform: scale(0.8);
      position: relative;
    }
  }
  .p-qs-down {
    color: rgba(55, 161, 12, 1);
    span {
      padding-left: 0.3rem;
      &::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-width: 0.12rem;
        border-style: solid;
        border-color: rgba(55, 161, 12, 1) transparent transparent transparent;
        position: absolute;
        top: 0.13rem;
        left: 0rem;
      }
    }
  }
  .p-qs-up {
    color: rgba(216, 45, 39, 1);
    span {
      padding-left: 0.3rem;
      &::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-width: 0.12rem;
        border-style: solid;
        border-color: transparent transparent rgba(216, 45, 39, 1) transparent;
        position: absolute;
        top: 0.01rem;
        left: 0rem;
      }
    }
  }
}
.mt30 {
  margin-top: 0.2rem;
}
</style>
